<template>
  <div class="clear-token-container">
    <n-card title="清除 Token" style="max-width: 600px;">
      <n-space vertical size="large">
        <n-alert title="功能说明" type="info">
          此功能用于模拟 Token 失效或被移除的场景。点击下方的按钮将只从本地存储中移除 Token，但不会清除当前应用的登录状态（如 Pinia store 中的用户信息）。
        </n-alert>
        <n-alert title="如何测试" type="warning">
          清除 Token 后，您可以尝试访问需要认证的页面（如“新闻列表”），观察应用的反应。预期的行为是，由于请求头中缺少 Token，API 请求会失败，应用可能会将您重定向到登录页面。
        </n-alert>
        <n-button type="primary" size="large" block @click="handleClearToken">
          <template #icon>
            <n-icon>
              <Icons name="trash-outline" />
            </n-icon>
          </template>
          确认清除 Token
        </n-button>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { NCard, NButton, NIcon, NSpace, NAlert, useMessage } from 'naive-ui'
import { useAuthStore } from '@/store/auth'
import Icons from '@/components/Icons.vue'

const message = useMessage()
const authStore = useAuthStore()

const handleClearToken = () => {
  authStore.clearAuthState()
  message.success('Token 和用户信息已成功清除！')
}
</script>

<style scoped>
.clear-token-container {
  padding: 24px;
  display: flex;
  justify-content: center;
}
</style>
